<template>
  <div>
    <Tips />

    <!-- 产品列表 -->
    <van-checkbox-group v-model="result" :disabled="isShowStepper">
      <!-- name属性需要独立，不然会全部控制 -->
      <van-checkbox
        :name="item.id"
        v-for="item in cartList"
        :key="item.id"
        @click="goodsItenClick(item)"
      >
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price.toFixed(2)"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />
          <!-- 步进器 -->
          <van-stepper
            v-model="item.number"
            v-show="isShowStepper"
            @change="ChangeNum(item)"
          />
          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              @click="del(item.product_id)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>

    <!-- 提交订单栏 -->
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedAll" :disabled="isShowStepper || cartList.length===0"
        >全选</van-checkbox
      >
      <template #tip>
        累计共{{ cartTotal.goodsCount }}件商品，可点击<van-button
          :type="isShowStepper ? 'danger' : 'primary'"
          size="small"
          @click="isShowStepper = !isShowStepper"
          >{{ isShowStepper ? "完成编辑" : "编辑" }}</van-button
        >按钮进行商品数量的修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from "@/components/Tips";
import Vue from "vue";
import {
  GetCartData,
  ChangeCheck,
  ChangeStepNum,
  Delgoods,
} from "@/request/api";
export default {
  components: {
    Tips,
  },
  data() {
    return {
      result: [],
      // checkedAll: true,  // 全选复选框的值

      // 商品总列表
      cartList: [],
      // 购物车数据
      cartTotal: {},

      // 是否显示步进器
      isShowStepper: false,
    };
  },
  computed: {
    // 全选复选框的值
    checkedAll: {
      get() {
        // return true/false
        // 受result数组的影响
        // result数组 和 cartList数组 的长度是否相等
        return this.result.length == this.cartList.length && this.cartList.length!==0;
      },
      set(val) {
        console.log("点击了全选按钮", val); //val就是要修改的值

        // 获取每一项的product_id
        let ids = this.cartList.map((item) => {
          return item.product_id;
        });
        // console.log(ids.join()); //数组分割字符串
        // console.log(ids.toString()); //数组分割字符串

        // 发起全选/全不选的请求
        ChangeCheck({
          isChecked: val == false ? 0 : 1, //告诉后端选中状态，1为选中，0为不选中
          productIds: ids.toString(), //告诉后端哪些产品需要修改
        }).then((res) => {
          console.log(res);
          this.renderData(res.data);
        });
      },
    },
  },
  // 组件内路由守卫
  // 优点：指定路由跳转的时候才会执行，节约了性能，提高了效率
  beforeRouteEnter(to, from, next) {
    // **获取不到组件内的实例this
    // 因为路由守卫执行前，组件实例还没被创建
    // console.log("执行了beforeRouteEnter");
    let token = localStorage.getItem("token");
    if (token) {
      next();
    } else {
      Vue.prototype.$toast("请先登录！"); 
      //不是组件，所以不能用this.$toast("请先登录！")  用Vue对象的prototype原型就可以找到$toast

      // 拿不到token就表示没有登录，跳转到 /user 我的页面
      setTimeout(() => {
        next("/user");
      }, 500);
    }
  },
  methods: {
    onSubmit() {},

    // 删除商品的请求
    del(pid) {
      Delgoods({
        productIds: pid.toString(),
      }).then((res) => {
        // console.log(res);
        // 调用渲染数据的方法
        this.renderData(res.data);
      });
    },

    // 步进器的请求
    ChangeNum(item) {
      ChangeStepNum({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      }).then((res) => {
        // console.log(res);
        // 调用渲染数据的方法
        this.renderData(res.data);
      });
    },

    // 函数封装--->渲染数据
    renderData(data) {
      // 每次渲染数据之前，要把result数组先清空，否则数组会在原数据的基础上一直增长，影响到选中列表和checkedAll的值
      this.result = [];
      let { cartList, cartTotal } = data;
      this.cartList = cartList;
      this.cartTotal = cartTotal;

      // 渲染产品列表每一项是否被选中
      // 遍历cartList数组，如果checked为1，就把item.id放到result数组中去
      cartList.map((item) => {
        item.checked ? this.result.push(item.id) : "";
      });
    },

    // 小复选框的请求
    goodsItenClick(item) {
      if (this.isShowStepper) return;
      // 点击每一项商品执行这里的代码
      console.log("点击了商品，获取到当前商品的勾选状态", item.checked);
      // 点击每一项商品时，发起请求告诉后端 状态的改变
      ChangeCheck({
        isChecked: item.checked == 1 ? 0 : 1, //选中状态，1为选中，0为不选中
        productIds: item.product_id.toString(), //多个商品选中，字符串拼接
      }).then((res) => {
        console.log("点击商品后的res", res);
        // 当拿到数据后，要重新渲染（渲染产品列表数据和产品每一项的勾选状态）

        // 调用渲染数据的方法
        this.renderData(res.data);
      });
    },
  },
  created() {
    GetCartData().then((res) => {
      console.log(res);

      // 调用渲染数据的方法
      this.renderData(res.data);
    });
  },
};
</script>
 
<style lang = "less" scoped>
.van-checkbox {
  padding: 0.1rem;
  background-color: #fff;
  /deep/.van-checkbox__label {
    flex: 1;
  }
}
.van-submit-bar {
  bottom: 0.5rem;
}
.van-submit-bar__tip {
  display: flex;
  align-items: center;
}
.van-card__title {
  max-height: 32px;
  font-weight: 500;
  line-height: 16px;
  font-size: 18px;
  margin-top: 20px;
}
.van-card__num {
  font-size: 0.14rem;
}
.van-stepper {
  text-align: right;
  background-color: #fafafa;
}
/* .van-button--danger {
  height: 100%;
} */

</style>